<template>
    <div>
        <div class="Top-navigation">
            <div class="navigation-box">
                <div style="margin-left: .3rem;"><van-icon name="arrow-left" @click="onClickLeft" /></div>
                <div>{{ selectedLabel }} <van-icon name="arrow-down" @click="showPopup" />
                    <van-popup v-model="show" round position="top" :style="{ width: '100%' }">
                        <!-- 订单列表 -->
                        <div class="popup-box" style="width: 100%;">
                            <div v-for=" item in options" :key="item.id" @click="changeColor(item)"
                                :style="{ background: item.backgroundColor, color: item.color }">{{ item.label }}</div>
                        </div>
                    </van-popup>

                </div>
                <div style="margin-right: .3rem;">手机查单</div>
            </div>
        </div>
        <!-- 筛选按钮 -->
        <div>
            <van-tabs v-model="active" color="#BFF4F7" background="#EDEFF2">
                <van-tab v-for=" item in Switchingdata " :key="item.id" :title="item.label">
                    <!-- 没有订单时显示 -->
                    <div class="placeholder">
                        <div style="margin-top: .5rem;"><img src="https://s.qunarzz.com/q_design_font/images/empty.png"
                                alt=""></div>
                        <div style="margin-top: .3rem; color: rgb(186, 186, 186);">您还没有订单呦~</div>
                    </div>
                </van-tab>
            </van-tabs>
        </div>


    </div>
</template>
<script>
export default {
    name:'myOrderpage',
    data() {
        return {
            //弹出框初值
            show: false,
            // 选项数据
            options: [{
                id: '1',
                label: '全部',
                backgroundColor: "",
                color: "",
            },
            {
                id: '2',
                label: '机票',
                backgroundColor: "",
                color: "",
            },
            {
                id: '3',
                label: '酒店'
                ,
                backgroundColor: "",
                color: "",
            },
            {
                id: '4',
                label: '酒店住宿',
                backgroundColor: "",
                color: "",
            },
            {
                id: '5',
                label: '汽车·船票',
                backgroundColor: "",
                color: "",
            },
            {
                id: '6',
                label: '火车票',
                backgroundColor: "",
                color: "",
            },
            {
                id: '7',
                label: '门票',
                backgroundColor: "",
                color: "",

            },
            {
                id: '8',
                label: '美食团购',
                backgroundColor: "",
                color: "",
            },
            {
                id: '9',
                label: '专车·租车',
                backgroundColor: "",
                color: "",
            },
            {
                id: '10',
                label: '旅游度假团购',
                backgroundColor: "",
                color: "",
            },
            {
                id: '11',
                label: '签证',
                backgroundColor: "",
                color: "",
            },
            {
                id: '12',
                label: '惠玩当地',
                backgroundColor: "",
                color: "",
            },
            {
                id: '13',
                label: '保险·车险',
                backgroundColor: "",
                color: "",
            },
            {
                id: '14',
                label: '全球购',
                backgroundColor: "",
                color: "",
            },
            ],
            selectedLabel: '酒店', // 用于存储选中的标签
            //切换数据
            Switchingdata: [
                {
                    id: '1',
                    label: '全部',

                }, {
                    id: '2',
                    label: '待支付',

                }, {
                    id: '3',
                    label: '待出票',

                }, {
                    id: '4',
                    label: '已出票',

                }, {
                    id: '5',
                    label: '退款单',

                },
            ]
        };
    },

    methods: {
        showPopup() {
            this.show = true;
        },
        onClickLeft() {
            this.$router.go(-1)
        },

        changeColor(item) {
            // 检查是否已经有其他元素被选中
            if (this.selectedItem) {
                this.selectedItem.backgroundColor = 'white'; // 恢复先前选中元素的背景颜色
                this.selectedItem.color = 'initial'; // 恢复先前选中元素的文本颜色
            }

            // 更新当前选中的元素
            item.backgroundColor = '#00C9E2';
            item.color = 'white';
            this.selectedLabel = item.label;
            this.selectedItem = item; // 记录当前选中的元素
            this.selectedLabel = item.label; // 设置选中的标签为当前选项的标签
            this.show = false;
        },
    },
};
</script>

<style scoped>
/* 顶部导航 */
.Top-navigation {
    width: 100%;
    height: 1.2rem;
    background-color: #EDEFF2;

}

.navigation-box {
    display: flex;
    line-height: 1.2rem;
    justify-content: space-between;
    font-size: .4rem;
    text-align: center;
}

.navigation-box div {
    width: 25%;
}

/* 订单弹出层 */
.van-popup {
    height: 8rem;
}

.popup-box {
    height: 8rem;
    background-color: #EDEFF2;
    display: flex;
    flex-wrap: wrap;
}

.popup-box div {
    margin: .1rem .3rem 0 .3rem;
    width: 2.7rem;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    border-radius: .1rem;
    background-color: #fff;
}

/* 没有订单显示 */
.placeholder {
    height: 11rem;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.placeholder img {
    width: 6rem;
    height: 4rem;

}

.van-popup {
    position: fixed;
    bottom: 10rem;
}
</style>